
<template>
    <!-- 认可类别页面 -->
    <div class="app-container">
        <!-- 其他操作 -->
        <section class="filter-container">
            <el-row>
                <el-button type="primary" size="small" @click="openForm('add')">添加类型</el-button>
            </el-row>
        </section>
        <!-- 表格数据 -->
        <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。" stripe highlight-current-row>
            <el-table-column type="index" align="center" width="50">
            </el-table-column>
            <el-table-column prop="approvetype_name" align="center" label="类别名称">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <i class="iconfont ali-edit-2" @click="openForm('edit', scope.row)"></i>
                    &nbsp;
                    <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <section>
            <so-pagination :query="listQuery" @initList="initList" />
        </section>
        <!-- 添加编辑类别模态框 -->
        <section>
            <el-dialog width="600px" :title="dialog.state=='add'?'添加类别':'编辑类别'" :visible.sync="dialog.show">
                <div>
                    <el-form ref="form" :model="form" label-width="135px">
                        <el-form-item label="名称" prop="approvetype_name" :rules="filter_rules({required:true})">
                            <el-input v-model.trim="form.approvetype_name" style="width: 390px" placeholder="请输入类别名称"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialog.show = false">取 消</el-button>
                    <el-button type="primary" @click="validate('form')">确 定</el-button>
                </span>
            </el-dialog>
        </section>
    </div>
</template>
<script>
import { approvetype_list, approvetype_save, approvetype_edit, approvetype_delete } from '@/api/approvetype'
import SoPagination from '@/components/SoPagination'

export default {
    name: "integralClass",
    components: { SoPagination },
    data() {
        return {
            loading: false,
            tableList: [],
            listQuery: { start: 0, limit: 10, total: 0, current: 1 },
            dialog: { show: false, state: '' },
            form: {}
        };
    },
    methods: {
        openForm(state, e) {
            this.dialog = { state: state, show: true }
            this.form = e != null ? e : {};
        },
        async delRow(row) {
            try {
                let res = await this.$confirm('确认删除吗？')
                if (res == 'confirm') {
                    this.loading = true;
                    let { data } = await approvetype_delete(row);
                    this.loading = false;
                    if (data.status == 100) {
                        this.$message.success('删除成功')
                        this.initList();
                    }
                }
            } catch (error) {
                console.log(error, 'error')
            }
        },
        async saveObj() {
            this.loading = true
            const parms = { ...this.form, company_id: localStorage.getItem('companyId') - 0 }
            const { data } = await approvetype_save(parms)
            if (data.status == 100) {
                this.$message.success("添加成功")
            }
            this.loading = false;
            this.initList();
        },
        async editObj() {
            this.loading = true
            const parms = { ...this.form }
            const { data } = await approvetype_edit(parms)
            if (data.status == 100) {
                this.$message.success("编辑成功")
            }
            this.loading = false;
            this.initList();
        },
        validate(e) {
            this.$refs[e].validate((valid) => {
                if (valid) {
                    this.dialog.show = false;
                    this.dialog.state == 'add' ? this.saveObj() : this.editObj();
                } else {
                    return false;
                }
            });
        },
        async initList() {
            this.loading = true
            const query = { ...this.listQuery, company_id: localStorage.getItem('companyId') - 0 };
            const { data } = await approvetype_list(query);
            this.loading = false
            if (data.status == 100) {
                this.tableList = data.data.rows;
                this.listQuery.total = data.data.results;
            }
        }
    },
    created() {
        this.initList()
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.ali-edit-2 {
    cursor: pointer;
    color: #e6a23d;
}

.ali-bin {
    cursor: pointer;
    color: #f56c6c;
}

.form-text {
    padding: 10px;
    border-radius: 3px;
}
</style>


